<template>
	<view class="con">
		<uni-section class="mb-10" title="选择展示方式" type="line">
			近
			<uni-easyinput style="margin:10rpx;width: 200rpx;display: inline-block;" v-model="limit" @change="changeSelected" placeholder="输入数值"></uni-easyinput>
			<uni-data-select style="margin:10rpx;width: 200rpx;display: inline-block;" v-model="selectData.selected" :localdata="selectData.selectList" @change="changeSelected"></uni-data-select>
			<uni-easyinput style="margin:10rpx;width: 200rpx;display: inline-block;" v-model="nickname" @change="changeSelected" placeholder="输入商户"></uni-easyinput>
		</uni-section>
		<view class="box">
			<qiun-data-charts
				type="demotype"
				:chartData="chartsDataLine"
				background="none"
				:ontouch="true"
				canvasId="scrolllineid"
				:canvas2d="false"
				class="charts"
				:opts="{ enableScroll: true, xAxis: { scrollShow: true, itemCount: 7, disableGrid: true } }"
			/>
		</view>
		
	</view>
	
</template>

<script>
	import config from '../../../utils/config.js'
	export default {
		
		data(){
		 return{
			  chartsDataLine: {
					categories: [],
					series: [
						{name: '交易金额',data: [],},
					],
				},
				selectData:{
					selected:"日",
					selectList:[{value: 'year', text: '年'}, {value: 'month', text: '月'}, {value: 'day', text: '日'}]
				},
				nickname: '',
				limit: '7',
			}
	 },
		methods:{
		 // 获取数据
		 getSalesCurve(){
			 let that = this
			 this.request({
			 	url: config.baseUrl + "/wx/getSalesCurve",
			 	data:{
			 		'nickname': that.nickname,
			 		'model': that.selectData.selected,
					'limit': that.limit,
			 	}
			 }).then(res => {
				 let keys = []
				 let values = []
				 for (let i=0;i<res.data.length;i++){
					 keys.push(res.data[i].date.substr(-5))
					 values.push(res.data[i].total)
				 }
				 that.chartsDataLine.categories = keys
				 that.chartsDataLine.series[0].data = values
			 })
		 },
		 // 修改选择
		 changeSelected(){
			 this.getSalesCurve()
		 },
	 }
	}
</script>

<style lang="scss">
	.con{
		height: 100vh;
	}
.box {
  width: 730rpx;
  height: 460rpx;
	position: absolute;
	bottom: 10rpx;
}
.charts {
  width: 100%;
  height: 100%;
}

</style>
